<template>
    <!-- <div style="height: 70px;">1</div> -->
    <div class="main_layout">
        <div class="main_left">
            <!-- <div @click="getdata" style="height: 60px;background-color: #000000;z-index: 999;">获取</div> -->
            <div class="article" v-for="(item, index) in  this.data" :key="index">
                <div class="discussion_sponsor">
                    <div style="display: flex;align-items: flex-end">
                        <img class="ds_avatar" :src=item.image_url alt="">
                        <div class="ds_name">{{ item.username}}</div>
                        <div class="ds_date">{{ item.createdAt.slice(0, -5).split('T')[0]}}&nbsp;{{ item.createdAt.slice(0,
                            -5).split('T')[1]}}</div>
                    </div>
                    <div class="content">
                        <div @click="this.$router.push('/DetailPage')">
                            <span class="fz18_title">{{ item.title }}</span>
                            <p class="content_p fz14_color" v-html="item.content"></p>
                        </div>
                        <div class="ds_info">
                            <div style="display: flex;">
                                <!-- <div class="" v-for="(img, index) in item.ds_content.img" :key="index">
                                </div> -->
                                <img v-if="item.image_url" :src=item.image_url alt="">
                            </div>
                            <div style="display: flex;">
                                <div class="operation">
                                    <span>
                                        <svg t="1718950529587" class="icon" viewBox="0 0 1161 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="3150" width="200" height="200">
                                            <path
                                                d="M1061.385 586.959118L580.785226 1022.548037v1.451963-1.451963l-1.451963 1.451963v-2.903926l-480.599775-435.588919c-133.580602-135.032565-133.580602-351.375061 0-484.955664 130.676676-132.128639 345.567209-133.580602 479.147811-2.903926l2.903927 2.903926c130.676676-133.580602 345.567209-133.580602 477.695848-2.903926l2.903926 2.903926c132.128639 135.032565 132.128639 351.375061 0 486.407627z"
                                                fill="#bfbfbf" p-id="3151"
                                                data-spm-anchor-id="a313x.search_index.0.i2.36a13a81Fjvptv"
                                                class="selected"></path>
                                            <path
                                                d="M348.471135 171.697681h-7.259815c-95.829562 0-174.235568 78.406005-174.235568 174.235568v7.259815c0 15.971594-13.067668 29.039261-29.039261 29.039262s-29.039261-13.067668-29.039261-29.039262v-2.903926-4.355889c0-127.77275 104.541341-232.31409 232.31409-232.31409h7.259815c15.971594 0 29.039261 13.067668 29.039262 29.039261s-13.067668 29.039261-29.039262 29.039261z"
                                                fill="#e6e6e6" p-id="3152"
                                                data-spm-anchor-id="a313x.search_index.0.i3.36a13a81Fjvptv" class="">
                                            </path>
                                        </svg>
                                    </span>
                                    <span>
                                        <svg t="1718950778379" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="5435" width="200" height="200">
                                            <path
                                                d="M510.4 145.6c-202.6 0-366.8 159.6-366.8 356.5 0 102.1 44.3 194.2 115 259.2-15.6 23.3-34.4 44.1-56.2 61.4 1.1-0.2 1.7-0.2 1.3 0-7.8 5.3-13.1 14.4-13.1 24.7 0 13.2 8.6 24 20.3 27.9 14.6 2.2 29.4 3.7 44.7 3.7 18.5 0 36.5-1.9 54.2-5h0.1c10.8-2 21.4-4.3 31.7-7.2 26.7-8.2 53.5-20.2 53.5-20.2l8.3-3.8c17.3 6.9 41.1 10.7 60.8 12.8v-0.1c5.5 0.7 10.9 1.1 16.4 1.6 12.4 0.9 20.8 1.1 20.8 1.1v0.1c2.9 0.1 5.9 0.3 8.9 0.3 202.6 0 366.8-159.6 366.8-356.5 0.1-197-164.2-356.5-366.7-356.5z"
                                                p-id="5436" fill="#bfbfbf"></path>
                                        </svg>

                                    </span>
                                    <span>
                                        <svg t="1718950961477" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="6166" width="200" height="200">
                                            <path
                                                d="M390.121162 494.228241c-17.272385 0-31.276331 14.003945-31.276331 31.275307l0 30.511921c0 17.272385 14.003945 31.275307 31.276331 31.275307s31.275307-14.003945 31.275307-31.275307l0-30.511921C421.396469 508.232187 407.393547 494.228241 390.121162 494.228241z"
                                                fill="#bfbfbf" p-id="6167"></path>
                                            <path
                                                d="M665.500023 556.016493l0-30.511921c0-17.272385-14.003945-31.275307-31.275307-31.275307-17.272385 0-31.275307 14.003945-31.275307 31.275307l0 30.511921c0 17.272385 14.003945 31.275307 31.275307 31.275307C651.496078 587.292823 665.500023 573.288878 665.500023 556.016493z"
                                                fill="#bfbfbf" p-id="6168"></path>
                                            <path
                                                d="M423.458431 678.320003c11.224646 18.071587 42.032302 48.65514 86.267782 48.65514 44.022633 0 75.206866-30.354332 86.695524-48.287773 9.229199-14.416338 5.0449-33.398668-9.254781-42.816155-14.294564-9.407254-33.622772-5.406127-43.218314 8.765641-0.132006 0.198521-13.632485 19.786649-34.223452 19.786649-20.020986 0-32.471552-18.131963-33.311687-19.394722-9.188266-14.452153-28.317952-18.84009-42.891879-9.778714C418.84639 644.366703 414.340773 663.649885 423.458431 678.320003z"
                                                fill="#bfbfbf" p-id="6169"></path>
                                            <path
                                                d="M761.077845 230.996025c-21.171182-21.405519-41.212634-17.093307-48.822962-14.238282-7.329942 2.728134-24.571628 12.034081-26.383904 39.35431-1.358951 20.565385-7.141654 38.866193-18.111496 56.356542C628.379591 197.948351 517.16872 90.610694 479.601102 71.725578c-24.800849-12.472056-42.912345-5.736655-51.494815-0.610914-8.786107 5.238304-23.655769 18.371416-24.515347 47.488571-3.099594 105.489566-59.267848 209.960942-93.684706 269.320888-9.366322-17.669428-20.255323-37.20639-31.795147-54.660924-11.041474-16.696264-25.314549-19.211551-32.838919-19.221784-0.020466 0-0.035816 0-0.056282 0-9.42772 0-23.049972 3.634784-34.55398 20.906146C96.696296 506.048451 85.700871 664.423505 178.856527 792.941554c6.118348 8.44023 15.668865 12.924357 25.350364 12.919241 6.362918 0 12.787234-1.934049 18.330484-5.950526 13.983479-10.139941 17.10354-29.697369 6.968715-43.680848-87.816045-121.143081-45.121664-256.538771 14.991436-357.655749 8.236592 14.71105 15.826454 29.448706 22.072715 41.573861 3.104711 6.022157 5.844102 11.341303 8.139378 15.638165 6.674003 12.511965 19.623943 20.346397 33.800827 20.438495 14.344706 0.340761 27.234271-7.574512 34.065863-20.005636 3.028986-5.507434 7.100722-12.431124 11.901051-20.6012 33.505092-57.018621 101.692077-173.070754 110.789269-298.555723 42.525536 33.912367 140.15611 141.239791 152.652725 233.743602 1.883907 13.927197 11.245112 25.507954 24.429389 30.222325 13.331633 4.754281 28.083615 1.690502 38.498826-8.017604 29.890774-27.834952 49.682539-57.817824 59.823504-90.879823 71.729671 88.772836 172.872233 283.050588 40.759309 453.280644-10.588149 13.647835-8.113795 33.291221 5.533017 43.884486 13.647835 10.577916 33.291221 8.118911 43.884486-5.533017C987.837382 591.477123 875.134531 346.386078 761.077845 230.996025z"
                                                fill="#bfbfbf" p-id="6170"></path>
                                            <path
                                                d="M720.374818 827.104631c-65.804728 47.036269-130.87063 69.38323-204.758454 70.324672-75.659167 1.069355-157.534919-25.66145-213.325573-69.479421-13.58132-10.670014-33.246195-8.302083-43.915186 5.279237-10.670014 13.586436-8.3072 33.246195 5.279237 43.915186 65.351404 51.326992 160.003134 82.862219 248.103658 82.862219 1.552356 0 3.104711-0.010233 4.652973-0.025583 86.079494-1.099031 164.697039-27.92091 240.340857-81.992409 14.049994-10.04375 17.302061-29.575596 7.254218-43.630706C753.956657 820.303738 734.418672 817.050648 720.374818 827.104631z"
                                                fill="#bfbfbf" p-id="6171"></path>
                                        </svg>
                                    </span>
                                </div>

                            </div>
                        </div>
                    </div>



                </div>


            </div>
        </div>
        <div class="main_right"></div>
    </div>

</template>

<script>
import { GetArticles } from '../api/article.js';
import '@/assets/css/index.less'
export default {
    data() {
        return {
            crumbs: [{ id: 1, name: "动漫", data: { id: 1, name: "原神" } }],
            data : []
        }
    },
    methods: {
        getdata(){
            GetArticles().then(res => {
                this.data = res.data.data.articles
                this.$message({
                    message: res.data.message,
                    type: "success",
                });
            }).catch((error) => {
                    this.$message.error(error);
            });
        }
        // const header_layout = 
    },
    mounted() {
        
    },
    created() {
       this.getdata()
    }
    
}
</script>

<style lang="less" scoped>
// height: calc(100vh);
.main_layout {
    height: calc(100vh - 70px);
    // height: 60vh;
    display: flex;
    justify-content: center;

    .main_left {
        // height:calc(100% - 70px);
        overflow: scroll;
        width: 820px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        justify-content: flex-start;

        .article {
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px;
            width: 100%;
            box-sizing: border-box;
            background-color: #ffffff;
            transition: all 0.2s ease-in;
            box-shadow: -2px 3px 30px#f0f0f0;

            .discussion_sponsor {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                border-radius: 8px;

                .ds_avatar {
                    width: 30px;
                    height: 30px;
                    border-radius: 100%;
                    margin-right: 10px;
                }

                .ds_name {
                    width: 80px;
                    color: #ff6600;
                    font-weight: 700;
                    font-family: "黑体";
                    display: flex;
                    align-items: end;
                }


            }

            .content {
                margin-top: 10px;
                width: 800px;

                .content_p {
                    padding: 0;
                    margin: 0;
                    display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                        /* 显示两行 */
                }

                .ds_date {
                    display: flex;
                    align-items: flex-end;
                }

                .ds_info {
                    padding-top:10px;
                    display: flex;
                    justify-content: space-between;

                    img {
                        border-radius: 8px;
                        margin-top: 10px;
                        margin-right: 10px;
                        width: 100px;
                        height: 100px;
                    }
                }
            }

            .operation {
                // width: 200px;
                display: flex;

                span {
                    display: flex;
                    justify-self: center;
                    align-items: end;
                    padding-left: 10px;

                    svg {
                        width: 20px;
                        height: 20px;
                        padding-right: 2px;
                    }
                }
            }
        }

        .article:hover {
            box-shadow: -2px 3px 30px#d7d7d7;
        }
    }

    /* 宽度 */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .main_right {
        height: calc(100% - 70px);
        width: 400px;
        border-radius: 8px;
        background-color: #c4e2fa;
    }
}
</style>